import React from 'react';
import {
    Row,
    Col,
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import ReactEcharts from 'echarts-for-react';
import './style.less';

export default class CityList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            trader: [],
            dailyAmount: [],
            dailyMoney: [],
            monthlyAmount: [],
            monthlyMoney: [],
            monthlyRefund: [],
            monthlyRefundMoney: [],
            dailyTrader: [],
            monthTrader: [],
            refundTrader: [],
            // 饼状数据图
            dailyArray: [],
            monthlyArray: [],
            refundArray: [],
            dailyAmountArray: [],
            // 热门车站
            hotStation: [],
            hotStationAmount: [],
        };
    }

    componentDidMount() {
        // this.getData();
        // this.getHotStation();
    };

    getData = () => {
        const token = sessionStorage.getItem("token");
        axios
            .get(`${config.api}DailyStatics/Statistics`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                // console.log(data)
                function ObjStory(value, name) {
                    this.value = value;
                    this.name = name;
                }
                let dailyArray = new Array();
                let dailyAmountArray = new Array();
                let trader = data.data.dailyTrader;
                let dailyMoney = data.data.dailyMoney;
                let dailyAmount = data.data.dailyAmount;
                for (var i = 0, j = 0; i < dailyMoney.length, j < trader.length; i++ , j++) {
                    dailyArray.push(new ObjStory(dailyMoney[i], trader[j]))
                };
                for (var i = 0, j = 0; i < dailyAmount.length, j < trader.length; i++ , j++) {
                    dailyAmountArray.push(new ObjStory(dailyAmount[i], trader[j]))
                };

                this.setState({
                    trader: data.data.trader,
                    dailyAmount: data.data.dailyAmount,
                    dailyMoney: data.data.dailyMoney,
                    monthlyAmount: data.data.monthlyAmount,
                    monthlyMoney: data.data.monthlyMoney,
                    monthlyRefund: data.data.monthlyRefund,
                    monthlyRefundMoney: data.data.monthlyRefundMoney,
                    dailyTrader: data.data.dailyTrader,
                    monthTrader: data.data.monthTrader,
                    refundTrader: data.data.refundTrader,
                    dailyArray: dailyArray,
                    dailyAmountArray: dailyAmountArray
                })
            })
            .catch(err => {
                intercept;
            })
    }
    getHotStation = () => {
        const token = sessionStorage.getItem("token");
        axios
            .get(`${config.api}DailyStatics/HotStation`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                // console.log(data)
                let hotStation = this.state.hotStation;
                let hotStationAmount = this.state.hotStationAmount;
                data.data.hotStations.forEach((item, i) => {
                    hotStation.push(item.stationName);
                    hotStationAmount.push(item.ticketAmount)
                })
                this.setState({
                    hotStation: hotStation,
                    hotStationAmount: hotStationAmount,
                })
            })
            .catch(err => {
                intercept;
            })
    }


    option(trader, dailyAmount, money) {
        let option3 = {
            title: {
                text: '当日售票数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    // 平台名称
                    data: trader,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '当日售票量',
                    type: 'bar',
                    // 平台对应数据
                    data: dailyAmount,
                },
                {
                    name: '当日售金额',
                    type: 'bar',
                    data: money,
                },

            ]
        };
        return option3
    }

    option2(trader, dailyAmount, money) {
        let option2 = {
            title: {
                text: '当月售票数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',
                }
            },
            legend: {
                data:['当月售票量', '当月售金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    // 平台名称
                    data: trader,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '当月售票量',
                    type: 'bar',
                    // 平台对应数据
                    data: dailyAmount,
                },
                {
                    name: '当月售金额',
                    type: 'bar',
                    data: money,
                }

            ]
        };
        return option2
    }

    option3(trader, dailyAmount, money) {
        let option2 = {
            title: {
                text: '当月售退票数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',
                }
            },
            legend: {
                data:['月退票量', '月退票金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    // 平台名称
                    data: trader,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '月退票量',
                    type: 'bar',
                    // 平台对应数据
                    data: dailyAmount,
                },
                {
                    name: '月退票金额',
                    type: 'bar',
                    data: money,
                },

            ]
        };
        return option2
    }

    option4(trader, dailyAmount) {
        let option = {
            title: {
                text: '热门车站售票量'
            },
            legend: {
                data:['车站售票量']
            },
            color: ['#C23531'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    // 平台名称
                    data: trader,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '车站售票量',
                    type: 'bar',
                    barWidth: '60%',
                    data: dailyAmount
                }
            ]
        };
        return option
    }

    render() {
        const option = {
            title: {
                text: '分销商日售票'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                y: '50',
                data: this.state.dailyArray
            },
            series: [
                {
                    name: '日售票金额',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: this.state.dailyArray
                },
                {
                    name: '日售票量',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        normal: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    data: this.state.dailyAmountArray
                }
            ]
        };
        return (
            <div>
                <div className="gutter-example">
                    <Row gutter={10}>
                        <Col className="gutter-row" style={{ background: '#fff' }} span={12}>
                            <ReactEcharts
                                option={option}
                                style={{ height: '500px', width: '100%' }} />
                        </Col>
                        {/* <Col className="gutter-row" style={{background:'#fff'}} span={24}>
                            <ReactEcharts
                                option={this.option(this.state.dailyTrader, this.state.dailyAmount, this.state.dailyMoney)}
                                style={{ height: '350px', width: '100%' }} />
                        </Col> */}
                        <Col className="gutter-row" style={{ background: '#fff' }} span={12}>
                            <ReactEcharts
                                option={this.option2(this.state.monthTrader, this.state.monthlyAmount, this.state.monthlyMoney)}
                                style={{ height: '500px', width: '100%' }} />
                        </Col>
                        <Col className="gutter-row" style={{ background: '#fff', marginTop: 20 }} span={12}>
                            <ReactEcharts
                                option={this.option3(this.state.refundTrader, this.state.monthlyRefund, this.state.monthlyRefundMoney)}
                                style={{ height: '500px', width: '100%' }} />
                        </Col>
                        {/* 热门车站 */}
                        <Col className="gutter-row" style={{ background: '#fff', marginTop: 20 }} span={12}>
                            <ReactEcharts
                                option={this.option4(this.state.hotStation, this.state.hotStationAmount)}
                                style={{ height: '500px', width: '100%' }} />
                        </Col>
                    </Row>

                </div>
            </div>
        )
    }
}




